<template>
  <div class="map" id="map"></div>
</template>

<script setup>
import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import * as turf from '@turf/turf'
import "./utils/tileLayer.baidu.js"
import 'leaflet.chinatmsproviders'
import './utils/leaflet.contextmenu'
import { onMounted } from 'vue'
import fs from './data/440600_full.json'

onMounted(() => {
  window.map = L.map('map', {
    center: [23, 118], // 地图中心
    // crs: L.CRS.EPSG4326,
    zoom: 6,
    minZoom: 1,
    maxZoom: 15,
    //限制显示地理范围
    maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180)),
    // renderer : canvasLabel,
    contextmenu: true, //右键菜单
    logoControl: false, // 隐藏logo版权
    zoomControl: false, // 缩放控件
    attributionControl: false // 隐藏文字版权
  })
  // 图层 引入智图地图
  let gaoDeLayer = L.tileLayer.chinaProvider("Geoq.Normal.PurplishBlue");
  // or
  // let gaoDeLayer = L.titleLayer("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}")
  gaoDeLayer.addTo(map);

  // 创建自定义辅助菜单
  var contextMenu = L.popup({
    offset: [10, 230],
    className: 'menuName',
    maxWidth: '100%',
  });
  L.marker([22, 118]).on('contextmenu', e => {
    // 阻止默认的右键菜单
    e.originalEvent.preventDefault();
    // 设置菜单内容和位置
    contextMenu.setLatLng(e.latlng)
      .setContent(`<div>111</div>`)
      .openOn(map);
  })
    .addTo(map)


})

</script>

<style  scoped>
.map {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>